<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rythm.js</title>
    <link rel="stylesheet" href="./demo/rythm.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <div class="container">
      <h1 class="shake3">
        Rythm.js - v2.0.0
      </h1>
      <h2>
        A javascript library that makes your page dance.
      </h2>
      <div>
        <a class="twist3" href="https://github.com/Okazari/Rythm.js">View on github</a>
        <a class="twist1" href="https://github.com/Okazari/Rythm.js/releases">Release notes</a>
      </div>
      <section>
        <h1>
          Basic
        </h1>
        <div class="demo">
          <div class="rythm rythm-bass"></div>
          <pre class="prettyprint">
            use css class 'rythm-bass'
          </pre>
        </div>
        <div class="demo">
          <div class="rythm rythm-medium"></div>
          <pre class="prettyprint">
            use css class 'rythm-medium'
          </pre>
        </div>
        <div class="demo">
          <div class="rythm rythm-high"></div>
          <pre class="prettyprint">
            use css class 'rythm-high'
          </pre>
        </div>
      </section>
      <section>
        <h1>
          Pulse
        </h1>
        <div class="demo">
          <div class="rythm pulse1"></div>
          <pre class="prettyprint">
            rythm.addRythm('pulse1', 'pulse', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm pulse2"></div>
          <pre class="prettyprint">
            rythm.addRythm('pulse2', 'pulse', 0, 10, {
              min: 0.1, 
              max: 1 
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm pulse3"></div>
          <pre class="prettyprint">
            rythm.addRythm('pulse3', 'pulse', 0, 10, {
              min: 1,
              max: 1.75
            })
          </pre>
        </div>
      </section>
      <section>
        <h1>
          Jump
        </h1>
        <div class="demo">
          <div class="rythm jump1"></div>
          <pre class="prettyprint">
            rythm.addRythm('jump1', 'jump', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm jump2"></div>
          <pre class="prettyprint">
            rythm.addRythm('jump2', 'jump', 150, 40, {
              min: -20,
              max: 20 
            })
          </pre>
        </div>
      </section>
      <section>
        <h1>
          Shake
        </h1>
        <div class="demo">
          <div class="rythm shake1"></div>
          <pre class="prettyprint">
            rythm.addRythm('shake1', 'shake', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm shake2"></div>
          <pre class="prettyprint">
            rythm.addRythm('shake2', 'shake', 150, 40, {
              min: 0,
              max: 20
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm shake3"></div>
          <pre class="prettyprint">
            rythm.addRythm('shake3', 'shake', 0, 10, {
              direction: 'left'
            })
          </pre>
        </div>
      </section>
      <section>
        <h1>
          Twist
        </h1>
        <div class="demo">
          <div class="rythm twist1"></div>
          <pre class="prettyprint">
            rythm.addRythm('twist1', 'twist', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm twist2"></div>
          <pre class="prettyprint">
            rythm.addRythm('twist2', 'twist', 0, 10, {
              min: 20,
              max: 180
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm twist3"></div>
          <pre class="prettyprint">
            rythm.addRythm('twist3', 'twist', 0, 10, { 
              direction: 'left'
            })
          </pre>
        </div>
      </section>
      <section>
        <h1>
          Vanish
        </h1>
        <div class="demo">
          <div class="rythm vanish vanish1"></div>
          <pre class="prettyprint">
            rythm.addRythm('vanish1', 'vanish', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm vanish vanish2"></div>
          <pre class="prettyprint">
            rythm.addRythm('vanish2', 'vanish', 0, 10, {
              reverse: true
            })
          </pre>
        </div>
      </section>
      <section>
        <h1>
          Color
        </h1>
        <div class="demo">
          <div class="rythm color1"></div>
          <pre class="prettyprint">
            rythm.addRythm('color1', 'color', 0, 10)
          </pre>
        </div>
        <div class="demo">
          <div class="rythm color2"></div>
          <pre class="prettyprint">
            rythm.addRythm('color2', 'color', 0, 10, { 
              from: [0,0,255], 
              to:[255,0,255] 
            })
          </pre>
        </div>
        <div class="demo">
          <div class="rythm color3"></div>
          <pre class="prettyprint">
            rythm.addRythm('color3', 'color', 0, 10, { 
              from: [255,255,0],
              to:[255,0,0]
            })</pre>
        </div>
      </section>
    </div>
    <div id='player'>
      <button id='start'>Start Demo</button>
      <button id='stop'>Stop Demo</button>
      <button id='mic'>Use Microphone</button>
    </div>
    <script type="text/javascript" src="./rythm.js"></script>
    <script type="text/javascript" src="./demo/exemple.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  </body>
</html>
